﻿<!DOCTYPE html>
<html>
<head>
   <title>bootstarp</title>
   <meta name="viewport" content="width=device-width ">
   <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
   <link href="bs/bootstrap.css" rel="stylesheet">
   <script src="bs/jquery.js"></script>
   <script src="bs/bootstrap.js"></script>
   <style type="text/css">
   .nav2{
      margin-right: auto;
      margin-left: auto;
      display: table;
      padding: 20px;
  }
  .img1{
   padding: 10px;
   margin-top: 10px;
  }
  .lay{
   margin-bottom: 400px;
  }
  h2{
   color: red;
  }
   </style>
</head>
<body >

   <div class="nav2">
  <ul class="nav nav-pills ">
   <li class=""style=" padding:10px">  <a href="#"><img src="favicon.png"></a></li>
   <li class="active "style=" padding:10px"><a href="#">Home</a></li>
   <li class="active "style=" padding:10px"><a href="#">SVN</a></li>
   <li class="active "style=" padding:10px"><a href="#">iOS</a></li>
   <li class="active "style=" padding:10px"><a href="#">VB.Net</a></li>
   <li class="active "style=" padding:10px"><a href="#">Java</a></li>
   <li class="active "style=" padding:10px"><a href="#">PHP</a></li>
</ul></div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="pic/pic1.jpg" alt="...">
      <div class="carousel-caption lay">
         <h1>stay foolsh</h1>
         <h2><a href="#">asd</a></h2>
      </div>
    </div>
    <div class="item">
      <img src="pic/pic2.jpg" alt="...">
      <div class="carousel-caption lay">
         <h1>everything</h1>
                  <h2><a href="#">asd</a></h2>
      </div>
    </div>
    <div class="item">
      <img src="pic/pic3.jpg" alt="...">
      <div class="carousel-caption lay">
         <h1>we believe</h1>
                  <h2><a href="#">asd</a></h2>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>



<div class="nav2">
<ul class="nav nav-pills">
<li><img src="pic/img1.png" class="img-circle img1"><div class="carousel-caption"><h2 data-toggle="tooltip" data-placement="top" title="<H1>坐等花开</H1>" data-html="true">坐等花开</h2></div></li>
<li><img src="pic/img2.png" class="img-circle img1"><div class="carousel-caption"><h2 data-toggle="tooltip" data-placement="top" title="<H1>清新自在</H1>" data-html="true">清新自在</h2></div></li>
<li><img src="pic/img1.png" class="img-circle img1"><div class="carousel-caption"><h2 data-toggle="tooltip" data-placement="top" title="<H1>测试文本</H1>" data-html="true">测试文本</h2></div></li>
</ul>
</div>

<address class="nav2">
  <a href="amazeui.html" > amazeui </a>
  <a href="index.html" > 寻 </a>  
<a href="mail:to745908670@qq.com">asd</a>
</address>


</body>
<script type="text/javascript">
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

$('.carousel').carousel({
  interval: 2000
})
</script>
</html>